import { getCategoryById } from '@/services/menuService';
import { menuType } from '@/typrs/menu';
import ArticleIcon from '@mui/icons-material/Article';
import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
import CompressIcon from '@mui/icons-material/Compress';
import DataObjectIcon from '@mui/icons-material/DataObject';
import DescriptionIcon from '@mui/icons-material/Description';
import DifferenceIcon from '@mui/icons-material/Difference';
import FingerprintIcon from '@mui/icons-material/Fingerprint';
import LinkIcon from '@mui/icons-material/Link';
import LocationSearchingIcon from '@mui/icons-material/LocationSearching';
import PaletteIcon from '@mui/icons-material/Palette';
import QrCodeIcon from '@mui/icons-material/QrCode';
import RouteIcon from '@mui/icons-material/Route';
import ScheduleIcon from '@mui/icons-material/Schedule';
import SearchIcon from '@mui/icons-material/Search';
import SecurityIcon from '@mui/icons-material/Security';
import EncodingIcon from '@mui/icons-material/SecurityUpdateGood';
import TableViewIcon from '@mui/icons-material/TableView';
import VpnKeyIcon from '@mui/icons-material/VpnKey';
import { Avatar, Box, Card, CardContent, Chip, Typography } from '@mui/material';
import { useMemo } from 'react';
import { useNavigate } from 'react-router-dom';

// 定义工具图标映射
const getToolIcon = (title: string) => {
    const iconMap: { [key: string]: React.ReactElement } = {
        'Freemarker': <ArticleIcon />,
        'Json': <DataObjectIcon />,
        'Timestamp': <ScheduleIcon />,
        'Base64': <EncodingIcon />,
        'Address': <LocationSearchingIcon />,
        'JsonTable': <TableViewIcon />,
        'TextCompare': <DifferenceIcon />,
        'QRCode': <QrCodeIcon />,
        'UUID': <FingerprintIcon />,
        'ColorPicker': <PaletteIcon />,
        'ImageCompress': <CompressIcon />,
        'URLEncode': <LinkIcon />,
        'MD5Hash': <SecurityIcon />,
        'PasswordGen': <VpnKeyIcon />,
        'RegexTest': <SearchIcon />,
        'JSONPath': <RouteIcon />,
        'Markdown': <DescriptionIcon />,
    };
    return iconMap[title] || <AutoFixHighIcon />;
};

// 定义更现代的颜色方案
const colorPairs = [
    { 
        bg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
        shadow: 'rgba(102, 126, 234, 0.4)',
        text: '#667eea',
        accent: '#f8fafc' 
    },
    { 
        bg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', 
        shadow: 'rgba(240, 147, 251, 0.4)',
        text: '#f093fb',
        accent: '#fef7ff' 
    },
    { 
        bg: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', 
        shadow: 'rgba(79, 172, 254, 0.4)',
        text: '#4facfe',
        accent: '#f0fcff' 
    },
    { 
        bg: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', 
        shadow: 'rgba(67, 233, 123, 0.4)',
        text: '#43e97b',
        accent: '#f0fff9' 
    },
    { 
        bg: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', 
        shadow: 'rgba(250, 112, 154, 0.4)',
        text: '#fa709a',
        accent: '#fff9f0' 
    },
    { 
        bg: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)', 
        shadow: 'rgba(168, 237, 234, 0.4)',
        text: '#a8edea',
        accent: '#f8fff9' 
    },
    { 
        bg: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)', 
        shadow: 'rgba(255, 236, 210, 0.4)',
        text: '#fcb69f',
        accent: '#fffaf8' 
    },
    { 
        bg: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)', 
        shadow: 'rgba(161, 140, 209, 0.4)',
        text: '#a18cd1',
        accent: '#fdf7ff' 
    },
];

const ToolCard = ({ id, title, description, path, category }: menuType) => {
    const navigate = useNavigate();

    // 基于id生成固定的颜色索引
    const colorIndex = useMemo(() => {
        return id % colorPairs.length;
    }, [id]);

    // 获取当前工具的颜色
    const { bg, shadow, text, accent } = colorPairs[colorIndex];
    
    // 获取分类信息
    const categoryInfo = category ? getCategoryById(category) : null;

    return (
        <Card
            sx={{
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
                borderRadius: 3,
                overflow: 'hidden',
                position: 'relative',
                border: '1px solid',
                borderColor: 'rgba(255,255,255,0.1)',
                backdropFilter: 'blur(10px)',
                transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
                cursor: 'pointer',
                '&:hover': {
                    transform: 'translateY(-8px) scale(1.02)',
                    boxShadow: `0 20px 40px ${shadow}`,
                    '& .card-overlay': {
                        opacity: 1,
                    },
                    '& .tool-avatar': {
                        transform: 'scale(1.1)',
                        background: bg,
                    }
                },
                '&:before': {
                    content: '""',
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    right: 0,
                    height: '4px',
                    background: bg,
                    borderRadius: '12px 12px 0 0'
                }
            }}
            elevation={0}
            onClick={() => navigate(path)}
        >
            <Box
                className="card-overlay"
                sx={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    background: `linear-gradient(135deg, ${accent}40 0%, transparent 100%)`,
                    opacity: 0,
                    transition: 'opacity 0.3s ease',
                    pointerEvents: 'none'
                }}
            />
            
            <CardContent sx={{ 
                flexGrow: 1, 
                display: 'flex', 
                flexDirection: 'column',
                p: 3,
                position: 'relative',
                zIndex: 1
            }}>
                <Box
                    sx={{
                        display: 'flex',
                        alignItems: 'flex-start',
                        justifyContent: 'space-between',
                        mb: 3
                    }}
                >
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flex: 1 }}>
                        <Avatar
                            className="tool-avatar"
                            sx={{
                                width: 56,
                                height: 56,
                                background: `linear-gradient(135deg, ${text}20 0%, ${text}40 100%)`,
                                color: text,
                                transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
                                border: `3px solid ${text}20`,
                                boxShadow: `0 4px 12px ${text}25`,
                                position: 'relative',
                                overflow: 'hidden',
                                '&::before': {
                                    content: '""',
                                    position: 'absolute',
                                    top: '-50%',
                                    left: '-50%',
                                    width: '200%',
                                    height: '200%',
                                    background: `conic-gradient(from 0deg, transparent, ${text}30, transparent)`,
                                    animation: 'rotate 4s linear infinite',
                                    opacity: 0,
                                    transition: 'opacity 0.3s ease'
                                },
                                '&:hover::before': {
                                    opacity: 1
                                },
                                '& svg': {
                                    fontSize: 28,
                                    position: 'relative',
                                    zIndex: 2,
                                    filter: `drop-shadow(0 2px 4px ${text}40)`,
                                    transition: 'all 0.3s ease'
                                },
                                '@keyframes rotate': {
                                    '0%': {
                                        transform: 'rotate(0deg)'
                                    },
                                    '100%': {
                                        transform: 'rotate(360deg)'
                                    }
                                }
                            }}
                        >
                            {getToolIcon(title)}
                        </Avatar>
                        <Box sx={{ flex: 1, minWidth: 0 }}>
                            <Typography 
                                variant="h6" 
                                component="h2" 
                                sx={{ 
                                    fontWeight: 700,
                                    fontSize: '1.1rem',
                                    color: 'text.primary',
                                    mb: 1,
                                    wordBreak: 'break-word'
                                }}
                            >
                                {title}
                            </Typography>
                            <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
                                {categoryInfo && (
                                    <Chip 
                                        label={categoryInfo.name}
                                        size="small" 
                                        sx={{ 
                                            height: 20,
                                            fontSize: '0.7rem',
                                            fontWeight: 600,
                                            bgcolor: `${categoryInfo.color}20`,
                                            color: categoryInfo.color,
                                            border: `1px solid ${categoryInfo.color}40`,
                                            '& .MuiChip-label': {
                                                px: 1
                                            }
                                        }} 
                                    />
                                )}
                                <Chip 
                                    label="免费" 
                                    size="small" 
                                    sx={{ 
                                        height: 20,
                                        fontSize: '0.7rem',
                                        fontWeight: 600,
                                        bgcolor: '#4caf5020',
                                        color: '#4caf50',
                                        border: '1px solid #4caf5040',
                                        '& .MuiChip-label': {
                                            px: 1
                                        }
                                    }} 
                                />
                            </Box>
                        </Box>
                    </Box>
                </Box>
                
                <Typography 
                    variant="body2" 
                    color="text.secondary"
                    sx={{ 
                        lineHeight: 1.6,
                        flex: 1,
                        display: '-webkit-box',
                        WebkitLineClamp: 2,
                        WebkitBoxOrient: 'vertical',
                        overflow: 'hidden',
                        fontSize: '0.875rem'
                    }}
                >
                    {description}
                </Typography>
            </CardContent>
        </Card>
    );
};

export default ToolCard;